<template>
  <div class="components-shuttle">
        <el-row>
            <el-col :span="11">
                <el-table
                    ref="multipleTable1"
                    :data="list.left"
                    border
                    size="small"
                    height="300"
                    style="width: 100%"
                    @selection-change="selectLeft">
                    <el-table-column type="selection" :selectable="checkSelectable" width="55" fixed />
                    <!-- <el-table-column :prop="name" label="列表" min-width="120" /> -->
                    <template v-for="(item,index) in columns">
                        <el-table-column :key="index" :label="item.label">
                            <template slot-scope="scope">
                                <span>
                                    {{scope.row[item.prop]}}
                                </span>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
            </el-col>
            <el-col :span="2" style="text-align:center;padding-top:100px;">
                <el-button type="primary" @click="selectToRight"><i class="el-icon-arrow-right"></i></el-button>
                <el-button type="warning" @click="selectToLeft" style="margin:15px 0 0;"><i class="el-icon-arrow-left"></i></el-button>
            </el-col>
            <el-col :span="11">
                <el-table
                    ref="multipleTable2"
                    :data="list.right"
                    border
                    size="small"
                    height="300"
                    style="width: 100%"
                    @selection-change="selectRight">
                    <el-table-column type="selection" width="55" fixed />
                    <!-- <el-table-column :prop="name" label="选中" min-width="120" /> -->
                    <template v-for="(item,index) in columns">
                        <el-table-column :key="index" :label="item.label">
                            <template slot-scope="scope">
                                <span>
                                    {{scope.row[item.prop]}}
                                </span>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
            </el-col>
        </el-row>
  </div>
</template>

<script>
export default {
    props:{
        listLeft: {
            type: Array,
            default: () => [],
        },
        listRight:{
            type: Array,
            default: () => [],
        },
        columns:{
            type: Array,
            default:() => {return [{prop: 'name', label: '名称'}]}
        },
        max: {
            type: Number,
            default: 10000,
        },
    },
    data(){
        return {
            list:{
                left: [],
                right: [],
            },
            select:{
                left:[],
                right: []
            },
        }
    },    
    watch:{
        listLeft:{
            immediate: true,
            handler(val){
                this.list.left = val;
            }
        }
    },
    created(){
        this.init();
    },
    methods:{
        init(){
            this.list.left = this.listLeft;
            this.list.right = this.listRight;
        },
        selectLeft(val){
            this.select.left = val;
        },
        selectRight(val){
            this.select.right = val;
        },
        selectToRight(){
            if((this.select.left.length + this.list.right.length) > 4){
                this.$message.warning('最多只能选择'+this.max+'个');
                return;
            }
            this.list.right = this.list.right.concat(this.select.left);
            this.toggleSelection();
            this.$emit('update:listRight', this.list.right);
        },
        selectToLeft(val){
            let ids = this.select.right.map(item => item.id);
            let arr = this.list.right.filter((item => {
                return ids.indexOf(item.id) == -1;
            }));
            this.list.right = arr;
            this.$emit('update:listRight', this.list.right);
        },
        // 取消选中
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable1.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable1.clearSelection();
            }
        },
        //禁止选中的条件
        checkSelectable(row) {
            if(this.list.right.length == 0){
                return true;
            }else{
                let ids = this.list.right.map(item => item.id);
                return ids.indexOf(row.id) == -1
            }
        },
    }
}
</script>

<style>

</style>